<template>
  <a-row v-if="addressList.length > 0" type="flex" justify="space-between" align="middle">
    <a-select
      :defaultValue="value.province_id ? value.province_id - 0 : '选择省'"
      :value="value.province_id ? value.province_id - 0 : '选择省'"
      style="width: 30%"
      @change="e => handleProvinceChange(e, 'province')">
      <a-select-option v-for="province in addressList" :key="province.id - 0">
        {{ province.name }}
      </a-select-option>
    </a-select>
    <a-select
      :defaultValue="value.city_id ? value.city_id - 0 : '选择市'"
      :value="value.city_id ? value.city_id - 0 : '选择市'"
      style="width: 30%"
      @change="e => handleProvinceChange(e, 'city')">
      <a-select-option v-for="city in addressList[provinceIndex].cityAll" :key="city.id - 0">
        {{ city.name }}
      </a-select-option>
    </a-select>
    <!-- <a-select
      :defaultValue="value.district_id ? value.district_id - 0 : '选择区县'"
      :value="value.district_id ? value.district_id - 0 : '选择区县'"
      style="width: 30%"
      @change="e => handleProvinceChange(e, 'district')">
      <a-select-option v-for="district in addressList[provinceIndex].cityAll[cityIndex].districtAll" :key="district.id - 0">
        {{ district.name }}
      </a-select-option>
    </a-select> -->
  </a-row>
</template>

<script>
import { address } from '@/api/components/address'

export default {
  name: 'SetAddress',
  components: {},
  data () {
    return {
      addressList: [],
      provinceIndex: 0,
      cityIndex: 0
    }
  },
  props: {
    value: {
      type: Object,
      default: e => {
        return {}
      }
    }
  },
  created () {
    this.getList()
  },
  watch: {
    value: {
      deep: true,
      handler (newVal, oldVal) {
        this.initData(newVal)
      }
    }
  },
  methods: {
    getList () {
      address()
        .then(res => {
          this.addressList = res.data.list
          this.initData(this.value)
        })
    },
    // 初始化数据
    initData (value) {
      if (value.province_id > 0 && this.addressList.length > 0) {
        this.addressList.forEach((province, index1) => {
          if (province.id - 0 === value.province_id - 0) {
            this.provinceIndex = index1
            if (value.city_id > 0) {
              this.addressList[index1].cityAll.forEach((city, index2) => {
                if (city.id - 0 === value.city_id - 0) {
                  this.cityIndex = index2
                }
              })
            } else {
              this.cityIndex = 0
            }
          }
        })
      } else {
        this.provinceIndex = 0
        this.cityIndex = 0
      }
    },
    handleProvinceChange (e, type) {
      var value = this.value
      if (type === 'province') {
        value = {
          province_id: e,
          city_id: 0,
          district_id: 0
        }
      } else if (type === 'city') {
        value = {
          province_id: value.province_id,
          city_id: e,
          district_id: 0
        }
      } else if (type === 'district') {
        value = {
          province_id: value.province_id,
          city_id: value.city_id,
          district_id: e
        }
      }
      this.$emit('input', value)
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
/deep/ .ant-row-flex-space-between {
  justify-content: flex-start;
  }

.title-but {
  margin-left: 6px;
}
</style>
